<template>
	<view class="bg">
		<view class="top">
			<u-icon name="checkmark-circle-fill" color="#fff"  size="50"></u-icon>
			<text class="text1">本次服务已完成</text>
			
		</view>
		<view class="bottom">
			<view class="bottom-b">
				<text class="text2">对本次客户的评价</text>
				<view class="bottom-r">
					<text>去投诉</text>
					<u-icon name="arrow-right" color="#999"  size="12"></u-icon>
				</view>
			</view>
			<view class="bottom-bb">
				<u-rate :count="count" v-model="service_score" active-color="#fdb841" size="40">服务评分</u-rate>
				<text class="text3">您的宝贵评价，对我们非常重要</text>
			</view>
			
			<view class="btn">
				<view class="btn-b" @click="evaluate()">
					<text>提交</text>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				service_score:0,
				count:5,
				order_id:''
				
			};
		},
		onLoad(e){
			this.order_id=e.order_sn
			/* console.log(this.order_id,'***-*-'); */
		},
		methods: {
			evaluate(){
				this.$http.post('api/evaluate/order',{
					order_sn:this.order_id,
					technician_score:this.service_score
				}).then(res=>{
					uni.showToast({
						title:res,
						icon:'none'
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:'/pages/order/order'
						})
					},100)
				})
			}
			
		}
	};
</script>

<style scoped lang="scss">
	.bg{
		width: 100%;
		height: 100vh;
		background-color: #31d081;
		font-family: 'PingFang-SC-Bold';
		.top{
			width: 100%;
			height: 30vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.text1{
				margin-top: 20rpx;
				font-weight: 500;
				font-size: 40rpx;
				font-family: 'PingFang-SC-Bold';
				color: #fff;
			}
			
		}
		.bottom{
			width: 100%;
			height: 70vh;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;
			.bottom-b{
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.text2{
					font-size: 32rpx;
					font-weight: 700;
				}
				.bottom-r{
					display: flex;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		.bottom-bb{
			width: 100%;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
		}
		.text3{
			font-size: 24rpx;
			color: #999;
			margin-top: 20rpx;
		}
		.btn{
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: center;
			margin-top: 430rpx;
			.btn-b{
				width: 98%;
				height: 80rpx;
				color: #fff;
				font-size: 30rpx;
				background-color: #31d081;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
			}
		}
	}
	
</style>
